<template>
  <el-tag
    :type="getTagType(priority)"
    :color="getTagColor(priority)"
    :effect="effect"
    :size="size"
    :closable="closable"
    @close="$emit('close')"
  >
    <el-icon v-if="showIcon" class="mr-1">
      <component :is="getPriorityIcon(priority)" />
    </el-icon>
    {{ getPriorityLabel(priority) }}
  </el-tag>
</template>

<script setup lang="ts">
import { 
  Top, 
  ArrowUp, 
  Minus, 
  ArrowDown,
  Bottom
} from '@element-plus/icons-vue'
import { DefectPriority } from '@/types/defect'

interface Props {
  priority: DefectPriority
  effect?: 'dark' | 'light' | 'plain'
  size?: 'large' | 'default' | 'small'
  closable?: boolean
  showIcon?: boolean
}

withDefaults(defineProps<Props>(), {
  effect: 'light',
  size: 'default',
  closable: false,
  showIcon: true
})

defineEmits<{
  close: []
}>()

// 优先级标签类型映射
const getTagType = (priority: DefectPriority) => {
  const typeMap: Record<DefectPriority, 'success' | 'primary' | 'warning' | 'info' | 'danger'> = {
    [DefectPriority.BLOCKER]: 'danger',
    [DefectPriority.CRITICAL]: 'danger',
    [DefectPriority.URGENT]: 'danger',
    [DefectPriority.HIGH]: 'warning',
    [DefectPriority.MEDIUM]: 'primary',
    [DefectPriority.LOW]: 'info',
    [DefectPriority.LOWEST]: 'info'
  }
  return typeMap[priority] || 'info'
}

// 优先级标签颜色映射
const getTagColor = (priority: DefectPriority) => {
  const colorMap: Record<DefectPriority, string> = {
    [DefectPriority.BLOCKER]: '#e53e3e',
    [DefectPriority.CRITICAL]: '#f56565',
    [DefectPriority.URGENT]: '#f56565',
    [DefectPriority.HIGH]: '#ed8936',
    [DefectPriority.MEDIUM]: '#3182ce',
    [DefectPriority.LOW]: '#68d391',
    [DefectPriority.LOWEST]: '#c0c4cc'
  }
  return colorMap[priority] || '#a0aec0'
}

// 优先级标签文本映射
const getPriorityLabel = (priority: DefectPriority) => {
  const labelMap: Record<DefectPriority, string> = {
    [DefectPriority.BLOCKER]: '阻塞',
    [DefectPriority.CRITICAL]: '严重',
    [DefectPriority.URGENT]: '紧急',
    [DefectPriority.HIGH]: '高',
    [DefectPriority.MEDIUM]: '中',
    [DefectPriority.LOW]: '低',
    [DefectPriority.LOWEST]: '最低'
  }
  return labelMap[priority] || '未知优先级'
}

// 优先级图标映射
const getPriorityIcon = (priority: DefectPriority) => {
  const iconMap: Record<DefectPriority, any> = {
    [DefectPriority.BLOCKER]: Top,
    [DefectPriority.CRITICAL]: Top,
    [DefectPriority.URGENT]: Top,
    [DefectPriority.HIGH]: ArrowUp,
    [DefectPriority.MEDIUM]: Minus,
    [DefectPriority.LOW]: ArrowDown,
    [DefectPriority.LOWEST]: Bottom
  }
  return iconMap[priority] || Minus
}
</script>

<style scoped>
.mr-1 {
  margin-right: 4px;
}
</style>